<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/vue.min.js"></script>
</head>
<body>
 <div id="example">
     <p>Original message: "{{ message }}"</p>
     <p>Computed reversed message: "{{ reversedMessage }}"</p>
 </div>

 <div id="demo">{{ fullName }}</div>


 Object.freeze() 阻止修改现有的属性，也意味着响应系统无法再追踪变化。
 <div id="app">
     <p>{{ foo }}</p>
     <!-- 这里的 `foo` 不会更新！ -->
     <button v-on:click="foo = 'baz'">Change it</button>
     <button v-bind:disabled="isButtonDisabled">Button</button>
     <div v-bind:id="dynamicId"></div>
 </div>

 侦听器watch
 <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
 <div id="watch-example">
     <p>
         Ask a yes/no question:
         <input v-model="question">
     </p>
     <p>{{ answer }}</p>
 </div>

 绑定 HTML Class
 <div class="static" id="bindHtml"
      v-bind:class="[{ active: isActive }, errorClass]">
     <my-component v-bind:class="{ active: isActive }"></my-component>
 </div>

 用 key 管理可复用的元素  v-if
 <div id="t1">
     <template v-if="loginType === 'username'">
         <label>Username</label>
         <input placeholder="Enter your username" key="username-input">
     </template>
     <template v-else>
         <label>Email</label>
         <input placeholder="Enter your email address" key="email-input">
     </template>
     <button v-on:click="changeType">changeType</button>
     <br/>
     v-show
     <h1 v-show="ok">Hello!</h1>
 </div>

 用 v-for 把一个数组对应为一组元素
 <ul id="example-1">
     <li v-for="item in items">
         {{ item.message }}
     </li>
 </ul>
 <ul id="example-2">
     <li v-for="(item, index) in items">
         {{ parentMessage }} - {{ index }} - {{ item.message }}
     </li>
 </ul>

 一个对象的 v-for

 <ul id="v-for-object" class="demo">
     <li v-for="(value, key, index) in object">
         {{ index }}. {{ key }}: {{ value }}
     </li>
     <li v-for="n in evenNumbers">{{ n }}</li>
 </ul>

 组件中的v-for
 <div id="todo-list-example">
     <form v-on:submit.prevent="addNewTodo">
         <label for="new-todo">Add a todo</label>
         <input
                 v-model="newTodoText"
                 id="new-todo"
                 placeholder="E.g. Feed the cat"
         >
         <button>Add</button>
     </form>
     <ul>
         <li
                 is="todo-item"
                 v-for="(todo, index) in todos"
                 v-bind:key="todo.id"
                 v-bind:title="todo.title"
                 v-on:remove="todos.splice(index, 1)"
         ></li>
     </ul>
 </div>


 <script src="js/login.js"></script>

</body>

</html>